<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>简途旅行</title>
    <meta name="format-detection" content="telephone=no" />
    <meta name="wap-font-scale" content="no">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="/old/css/yyy/yyy.scss?__inline">
</head>
<body>
<div class="loading">
    <div class="loading_gif">
        <img src="https://images.simpletour.com/wechat/activity/myWay/loading.gif" alt="">
    </div>
    <div class="progressBar">
        <div class="bar"><span class="bus"></span></div>
    </div>
    <div class="loading_btn">
        <img src="https://images.simpletour.com/wechat/activity/myWay/loading-btn.gif" alt="">
    </div>
</div>
<video style="background-color: rgb(0, 0, 0); width: 100%; height: 100%; display: none;" webkit-playsinline="" x-webkit-airplay="" id="video"  data-role="txp_video_tag" src="http://ugcbsy.qq.com/flv/194/40/s0371tner8y.p703.1.mp4?sdtfrom=v1010&amp;guid=af9e43d8595060c3114c1548ecc17d2f&amp;vkey=E1D10529BC8DDFAECFC7D6E544E919DA9BCD0C89958437D9613CDF75EC00CE13729D38E762579BB6DA148C8386E87C563121AF3694650265752EA098AA85D89CC9C059A8ABB632B24428ADA26A4994155310AE920B8D496098A7B25DA959FC862421048E039EEED494B8D483498CE6A7" class=""></video>
    <div class="pages" id="pages">
        <!--<div class="audio on"></div>-->
        <!--<audio id="audio" autoplay="" loop="loop" style="display:none" controls="">-->
            <!--<source src="http://www.w3school.com.cn/i/song.mp3" type="audio/mpeg">-->
        <!--</audio>-->
        <div class="page page1 current">
            <div class="page-content">
                <div class="cover hide"></div>
                <div class="cover-content">
                    <img src="https://images.simpletour.com/wechat/activity/myWay/title.png" alt="">
                </div>
                <img src="https://images.simpletour.com/wechat/activity/myWay/page1-bg.png" class="bg">
                <img src="https://images.simpletour.com/wechat/activity/myWay/dog1.gif" class="dog"/>
                <img src="https://images.simpletour.com/wechat/activity/myWay/border.png" class="border">
                <div class="bottom">
                    <img src="https://images.simpletour.com/wechat/activity/myWay/bottom_font.png" class="bottom_font png hide">
                    <img src="https://images.simpletour.com/wechat/activity/myWay/bottom_font_move.gif" class="bottom_font gif hide">
                </div>
                <div class="a-first animation1"></div>
                <div class="a-second animation2"></div>
                <div class="a-third animation1"></div>
                <div class="fly_card">
                    <img src="https://images.simpletour.com/wechat/activity/myWay/flyCard/zhi1.png" alt="" class="zhi1" />
                    <img src="https://images.simpletour.com/wechat/activity/myWay/flyCard/zhi2.png" alt="" class="zhi2" />
                    <img src="https://images.simpletour.com/wechat/activity/myWay/flyCard/zhi3.png" alt="" class="zhi3" />
                    <img src="https://images.simpletour.com/wechat/activity/myWay/flyCard/zhi4.png" alt="" class="zhi4" />

                    <div class="meanwhile">
                        <img src="https://images.simpletour.com/wechat/activity/myWay/flyCard/zhi5.png" alt="" class="zhi5" />
                        <img src="https://images.simpletour.com/wechat/activity/myWay/flyCard/zhi6.png" alt="" class="zhi6" />
                        <img src="https://images.simpletour.com/wechat/activity/myWay/flyCard/zhi7.png" alt="" class="zhi7" />
                        <img src="https://images.simpletour.com/wechat/activity/myWay/flyCard/zhi8.png" alt="" class="zhi8" />
                        <img src="https://images.simpletour.com/wechat/activity/myWay/flyCard/zhi9.png" alt="" class="zhi9" />
                        <img src="https://images.simpletour.com/wechat/activity/myWay/flyCard/zhi10.png" alt="" class="zhi10" />
                        <img src="https://images.simpletour.com/wechat/activity/myWay/flyCard/zhi11.png" alt="" class="zhi11" />
                        <img src="https://images.simpletour.com/wechat/activity/myWay/flyCard/zhi12.png" alt="" class="zhi12" />
                        <img src="https://images.simpletour.com/wechat/activity/myWay/flyCard/zhi13.png" alt="" class="zhi13" />
                        <img src="https://images.simpletour.com/wechat/activity/myWay/flyCard/zhi14.png" alt="" class="zhi14" />

                        <img src="https://images.simpletour.com/wechat/activity/myWay/flyCard/zhi5.png" alt="" class="zhi15" />
                        <img src="https://images.simpletour.com/wechat/activity/myWay/flyCard/zhi6.png" alt="" class="zhi16" />
                        <img src="https://images.simpletour.com/wechat/activity/myWay/flyCard/zhi7.png" alt="" class="zhi17" />
                        <img src="https://images.simpletour.com/wechat/activity/myWay/flyCard/zhi8.png" alt="" class="zhi18" />
                        <img src="https://images.simpletour.com/wechat/activity/myWay/flyCard/zhi9.png" alt="" class="zhi19" />
                        <img src="https://images.simpletour.com/wechat/activity/myWay/flyCard/zhi10.png" alt="" class="zhi20" />
                        <img src="https://images.simpletour.com/wechat/activity/myWay/flyCard/zhi11.png" alt="" class="zhi21" />
                        <img src="https://images.simpletour.com/wechat/activity/myWay/flyCard/zhi12.png" alt="" class="zhi22" />
                    </div>
                </div>
            </div>
        </div>

        <div class="page page2 ">
            <div class="page-content">
                <div class="cover hide"></div>
                <div class="cover-content">
                    <img src="https://images.simpletour.com/wechat/activity/myWay/confirm_modal.png" alt="">
                    <div class="later"></div>
                    <div class="now"></div>
                </div>
                <img src="https://images.simpletour.com/wechat/activity/myWay/page1-bg.png" class="bg">
                <img src="https://images.simpletour.com/wechat/activity/myWay/preVideo/black_people.png" class="black_people">
                <img src="https://images.simpletour.com/wechat/activity/myWay/border.png" class="border">
                <img src="https://images.simpletour.com/wechat/activity/myWay/preVideo/people_card1.png" alt="" class="people_card people_card1">
                <img src="https://images.simpletour.com/wechat/activity/myWay/preVideo/people_card2.png" alt="" class="people_card people_card2">
                <img src="https://images.simpletour.com/wechat/activity/myWay/preVideo/people_card3.png" alt="" class="people_card people_card3">
                <img src="https://images.simpletour.com/wechat/activity/myWay/preVideo/people_card4.png" alt="" class="people_card people_card4">
                <img src="https://images.simpletour.com/wechat/activity/myWay/preVideo/people_card5.png" alt="" class="people_card people_card5">
                <img src="https://images.simpletour.com/wechat/activity/myWay/preVideo/people_card6.png" alt="" class="people_card people_card6">
                <img src="https://images.simpletour.com/wechat/activity/myWay/preVideo/people_card7.png" alt="" class="people_card people_card7">
                <img src="https://images.simpletour.com/wechat/activity/myWay/preVideo/video_font.png" class="video_font out">
                <img src="https://images.simpletour.com/wechat/activity/myWay/preVideo/play.gif" alt="" class="play_btn">
                <div class="bottom">
                    <img src="https://images.simpletour.com/wechat/activity/myWay/preVideo/skipVideo.gif" class="bottom_font">
                </div>
            </div>
        </div>

        <div class="page page3">
            <div class="page-content">
                <img src="https://images.simpletour.com/wechat/activity/myWay/dui/dui_bg.gif" class="bg">
                <img src="https://images.simpletour.com/wechat/activity/myWay/border.png" class="border">
                <img src="https://images.simpletour.com/wechat/activity/myWay/dui/dui_icon.png" class="dui_icon">
                <img src="https://images.simpletour.com/wechat/activity/myWay/dui/font_dui.png" class="font_dui out">
                <div class="bottom">
                    <img src="https://images.simpletour.com/wechat/activity/myWay/dui/bottom_go_test_font.gif" class="bottom_font">
                </div>
            </div>
        </div>

        <div class="page page4 ">
            <div class="page-content">
                <img src="https://images.simpletour.com/wechat/activity/myWay/page1-bg.png" class="bg">
                <img src="https://images.simpletour.com/wechat/activity/myWay/q-1.png" alt="" class="head">
                <img src="https://images.simpletour.com/wechat/activity/myWay/q-2.png" alt="" class="light breath">
                <img src="https://images.simpletour.com/wechat/activity/myWay/border.png" class="border">
                <img src="https://images.simpletour.com/wechat/activity/myWay/q-3.png" class="cloud1 cloud">
                <img src="https://images.simpletour.com/wechat/activity/myWay/q-4.png" class="cloud2 cloud">
                <img src="https://images.simpletour.com/wechat/activity/myWay/q-5.png" class="cloud3 cloud">
            </div>
            <div style="position: absolute;bottom:0;left:0;right:0;">
                <img src="https://images.simpletour.com/wechat/activity/myWay/q-6.png" class="typewriter">
                <img src="https://images.simpletour.com/wechat/activity/myWay/q-7.png" class="left">
                <img src="https://images.simpletour.com/wechat/activity/myWay/q-7.png" class="right">
                <div class="question" id="question1" data-index="1" data-answer="yes">
                    <img src="https://images.simpletour.com/wechat/activity/myWay/question1.png">
                    <div class="color1 hide"></div>
                    <div class="color2 hide"></div>
                    <div class="radio first" data-option="yes"></div>
                    <div class="radio second" data-option="no"></div>
                </div>

                <div class="question" id="question2" data-index="2" data-answer="yes">
                    <img src="https://images.simpletour.com/wechat/activity/myWay/question2.png">
                    <div class="color1 hide"></div>
                    <div class="color2 hide"></div>
                    <div class="radio first" data-option="yes"></div>
                    <div class="radio second" data-option="no"></div>
                </div>

                <div class="question" id="question3" data-index="3" data-answer="yes">
                    <img src="https://images.simpletour.com/wechat/activity/myWay/question3.png">
                    <div class="color1 hide"></div>
                    <div class="color2 hide"></div>
                    <div class="radio first" data-option="yes"></div>
                    <div class="radio second" data-option="no"></div>
                </div>

                <div class="question" id="question4" data-index="4" data-answer="no">
                    <img src="https://images.simpletour.com/wechat/activity/myWay/question4.png">
                    <div class="color1 hide"></div>
                    <div class="color2 hide"></div>
                    <div class="radio first" data-option="yes"></div>
                    <div class="radio second" data-option="no"></div>
                </div>

                <div class="question" id="question5" data-index="5" data-answer="no">
                    <img src="https://images.simpletour.com/wechat/activity/myWay/question5.png">
                    <div class="color1 hide"></div>
                    <div class="color2 hide"></div>
                    <div class="radio first" data-option="yes"></div>
                    <div class="radio second" data-option="no"></div>
                </div>

                <div class="question" id="question6" data-index="6" data-answer="yes">
                    <img src="https://images.simpletour.com/wechat/activity/myWay/question6.png">
                    <div class="color1 hide"></div>
                    <div class="color2 hide"></div>
                    <div class="radio first" data-option="yes"></div>
                    <div class="radio second" data-option="no"></div>
                </div>

                <div class="question" id="question7" data-index="7" data-answer="no">
                    <img src="https://images.simpletour.com/wechat/activity/myWay/question7.png">
                    <div class="color1 hide"></div>
                    <div class="color2 hide"></div>
                    <div class="radio first" data-option="yes"></div>
                    <div class="radio second" data-option="no"></div>
                </div>

                <div class="question" id="question8" data-index="8" data-answer="yes">
                    <img src="https://images.simpletour.com/wechat/activity/myWay/question8.png">
                    <div class="color1 hide"></div>
                    <div class="color2 hide"></div>
                    <div class="radio first" data-option="yes"></div>
                    <div class="radio second" data-option="no"></div>
                </div>
            </div>
        </div>
    </div>
    <script src="/old/common/js/zepto.min.js"></script>
    <script type="text/javascript" src="/old/common/js/imgLoader.js"></script>
    <script>
        (function (doc, win) {
            var docEl = doc.documentElement,
                    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                    recalc = function () {
                        var clientWidth = docEl.clientWidth;
                        if (!clientWidth) return;
                        var style;
                        if (style = document.getElementById("forhtml")) {
                            style.parentNode.removeChild(style);
                        }
                        style = document.createElement("style");
                        style.id = "forhtml";
                        document.head.appendChild(style);
                        style.appendChild(document.createTextNode("html{font-size:" + 20 * (clientWidth / 375) + "px !important;}"));
                    };
            recalc();
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
        $(document).ready(function() {
            var loader = new imgLoader({
                backgroundResources:[
                    "https://images.simpletour.com/wechat/activity/myWay/loading.gif",
                    "https://images.simpletour.com/wechat/activity/myWay/page1-bg.png",
                    "https://images.simpletour.com/wechat/activity/myWay/dog1.gif",
                    "https://images.simpletour.com/wechat/activity/myWay/dog2.png",
                    "https://images.simpletour.com/wechat/activity/myWay/dog3.png",
                    "https://images.simpletour.com/wechat/activity/myWay/dog4.png",
                    "https://images.simpletour.com/wechat/activity/myWay/dog5.png",
                    "https://images.simpletour.com/wechat/activity/myWay/border.png",
                    "https://images.simpletour.com/wechat/activity/myWay/title.png",
                    "https://images.simpletour.com/wechat/activity/myWay/bottom_font.png",
                    "https://images.simpletour.com/wechat/activity/myWay/bottom_font_move.gif",
                    "https://images.simpletour.com/wechat/activity/myWay/flyCard/zhi1.png",
                    "https://images.simpletour.com/wechat/activity/myWay/flyCard/zhi2.png",
                    "https://images.simpletour.com/wechat/activity/myWay/flyCard/zhi3.png",
                    "https://images.simpletour.com/wechat/activity/myWay/flyCard/zhi4.png",
                    "https://images.simpletour.com/wechat/activity/myWay/flyCard/zhi5.png",
                    "https://images.simpletour.com/wechat/activity/myWay/flyCard/zhi6.png",
                    "https://images.simpletour.com/wechat/activity/myWay/flyCard/zhi7.png",
                    "https://images.simpletour.com/wechat/activity/myWay/flyCard/zhi8.png",
                    "https://images.simpletour.com/wechat/activity/myWay/flyCard/zhi9.png",
                    "https://images.simpletour.com/wechat/activity/myWay/flyCard/zhi10.png",
                    "https://images.simpletour.com/wechat/activity/myWay/flyCard/zhi11.png",
                    "https://images.simpletour.com/wechat/activity/myWay/flyCard/zhi12.png"
                ],
                onStart : function(total){
                },
                onProgress : function(current,total){
                    var percent = current/total;
                    $('.bar').css('transform', 'translate3d('+(-100+percent*100)+'%,0,0)');
                },
                onComplete: function() {
                    $('.loading .loading_btn').addClass('in');
                }
            });
            loader.start();
            var Promise = window.Promise;
            var docWidth = $(document).width()-16;
            var docHeight = $(document).height()-16;
            if(docWidth/docHeight > (723/1170)){
                $(".page-content").css({"height":docHeight+'px',"width":docHeight*723/1170+'px',left:(docWidth-docHeight*723/1170)/2+8+'px'})
            }else{
                $(".page-content").css({"height":docWidth*1170/723+'px',"width":docWidth+'px',top:(docHeight-docWidth*1170/723)/2+8+'px'})
            }
            $('.bottom .png').removeClass('hide').addClass('show');
            // 首屏动画效果
            function animation($zhi,index) {
                return new Promise(function(resolve, reject) {
                    function move(){
                        $zhi.addClass('rotate'+index);
                        setTimeout(function() {
                            if(index == 5) {
                                $('.meanwhile img').addClass('rotate');
                                resolve();
                            } else if(index == 6) {
                                setTimeout(function() {
                                    $('.page1 .cover').removeClass('hide');
                                    $('.page1 .cover-content').removeClass('out').addClass('in');
                                    $('.bottom .png').hide();
                                    $('.bottom .gif').removeClass('hide').addClass('show');
                                    resolve();
                                },1000);
                            } else {
                                if(index == 0) {
                                    $('.dog').attr('src','https://images.simpletour.com/wechat/activity/myWay/dog'+(index+1)+'.gif').addClass('wobble');
                                } else {
                                    $('.dog').attr('src','https://images.simpletour.com/wechat/activity/myWay/dog'+(index+1)+'.png').addClass('wobble');
                                }
                                setTimeout(function() {
                                    $('.dog').removeClass('wobble');
                                    // 设置两次直接的间隔
                                    setTimeout(function() {
                                        resolve();
                                    },1000);
                                },100);
                            }
                        },700);
                    }
                    move()
                })
            };

            $('.play_btn').click(function() {
                $('.play_btn').hide();
                $('.page2 .cover').removeClass('hide');
                $('.page2 .cover-content').show().removeClass('out').addClass('in');
            });
            $('.cover-content .later').click(function() {
                $('.page2 .cover').addClass('hide');
                $('.page2 .cover-content').hide().removeClass('in').addClass('out');
                $('.play_btn').show();
            });
            $('.cover-content .now').click(function() {
                var v = document.getElementById('video');
//                var fullscreenvideo = fullscreen(document.createElement("video"));
//                v[fullscreenvideo]();
                v.play();
//                autoFullScreen(v);
                $('.play_btn').show();
                $('.page2 .cover').addClass('hide');
                $('.page2 .cover-content').hide().removeClass('in').addClass('out');
            });
            // 点击loading页 go按钮
            $('.loading .loading_btn').click(function() {
                $('.loading').hide();
                setTimeout(function(){
                    animation($('.zhi1'),1)
                            .then(function(){return animation($('.zhi2'),2) })
                            .then(function(){return animation($('.zhi3'),3) })
                            .then(function(){return animation($('.zhi4'),4) })
                            .then(function(){return animation($('.zhi4'),5) })
                            .then(function(){return animation($('.zhi4'),6) })
                            .then(function() {

                            })
                },3000);
            });
            // page1 to page2
            $('.bottom_font.gif').click(function() {
                $('.page1').removeClass('current').addClass('prev');
                $('.page2').addClass('current');
                setTimeout(function() {
                    $('.black_people').addClass('riseUp');
                    setTimeout(function() {
                        $('.black_people').addClass('animationEnd');
                        $('.bottom')[0].clientLeft;
                        $('.video_font').removeClass('out').addClass('in');
                        var $peopleCard = $('.people_card');
                        $peopleCard.eq(0).addClass('gradual');
                        $peopleCard.eq(2).addClass('gradual');
                        $peopleCard.eq(4).addClass('gradual');
                        $peopleCard.eq(6).addClass('gradual');
                        setTimeout(function() {
                            $peopleCard.eq(1).addClass('gradual');
                            $peopleCard.eq(3).addClass('gradual');
                            $peopleCard.eq(5).addClass('gradual');
                        },1000);
                    },1000);
                },700);
            });
            // page2 to page3
            $('.page2 .bottom').click(function() {
                $('.page2').removeClass('current').addClass('prev');
                $('.page3').addClass('current');
                $('.page3 .font_dui').removeClass('out').addClass('in');
            });
            // page3 to page4
            $('.page3 .bottom').click(function() {
                $('.page3').removeClass('current').addClass('prev');
                $('.page4').addClass('current');
                setTimeout(function() {
                    $('.typewriter').addClass('up');
                    setTimeout(function() {
                        $('.page4 .right').addClass('up');
                        $('.page4 .left').addClass('up');
                        $('.page4 #question1').addClass('up');
                    },500);

                },1000);
            });

            var count = 1,score = 0;
            function questionAnimation(index) {
                $('.page4 .right').removeClass('exchange');
                $('.page4 .left').removeClass('exchange');
                setTimeout(function(){
                    $('#question'+index).removeClass('up').addClass('down');
                    $('.page4 .right').addClass('exchange');
                    $('.page4 .left').addClass('exchange');
                    setTimeout(function() {
                        $('#question'+(+index+1)).addClass('up');
                        count = 1;
                    },500);
                },500);
            }
            $('.question .radio').click(function() {
                if(count === 1) {
                    var $this = $(this);
                    var $question = $(this).parents('.question');
                    if($this.attr('data-option') == 'yes') {
                        $question.find('.color1').removeClass('hide');
                    } else {
                        $question.find('.color2').removeClass('hide');
                    }
                    count++;
                    if($question.attr('data-answer') == $(this).attr('data-option')) {
                        score++;
                    }
                    if($question.attr('data-index') == 8) {
                        if(score >= 0 && score <= 2) {
                            // turn answer D
                        } else if(score > 2 && score <= 4) {
                            // turn answer C
                        } else if(score > 4 && score <= 6) {
                            // turn answer B
                        } else if(score > 6 && score <= 8) {
                            // turn answer A
                        }
                    } else {
                        questionAnimation($question.attr('data-index'));
                    }
                }
            });

            // 针对安卓全屏播放
            var fullscreen = function(elem) {
                var prefix = 'webkit';
                if ( elem[prefix + 'EnterFullScreen'] ) {
                    return prefix + 'EnterFullScreen';
                } else if( elem[prefix + 'RequestFullScreen'] ) {
                    return prefix + 'RequestFullScreen';
                };
                return false;
            };
            function autoFullScreen(v){
                var ua   = navigator.userAgent.toLowerCase();
                var Android = String(ua.match(/android/i)) == "android";
                // if(!Android) return;//非android系统不使用;
                var video  = v,doc = document;
                if(!fullscreen) {
                    alert("不支持全屏模式");
                    return;
                }
                video.addEventListener("webkitfullscreenchange",function(e){
                    if(!doc.webkitIsFullScreen){//退出全屏暂停视频
                        this.pause();
                    };
                }, false);
                video.addEventListener('ended',function(){
                    doc.webkitCancelFullScreen(); //播放完毕自动退出全屏
                },false);

            };
        });

    </script>
</body>
</html>